<template>
	<div id="ZhuZhuangTu03"></div>
</template>

<script setup>
import {onMounted} from 'vue'
import {Column} from '@antv/g2plot'

const data = [
	{
		name: 'London',
		月份: 'Jan.',
		月均降雨量: 18.9
	},
	{
		name: 'London',
		月份: 'Feb.',
		月均降雨量: 28.8
	},
	{
		name: 'London',
		月份: 'Mar.',
		月均降雨量: 39.3
	},
	{
		name: 'London',
		月份: 'Apr.',
		月均降雨量: 81.4
	},
	{
		name: 'London',
		月份: 'May',
		月均降雨量: 47
	},
	{
		name: 'London',
		月份: 'Jun.',
		月均降雨量: 20.3
	},
	{
		name: 'London',
		月份: 'Jul.',
		月均降雨量: 24
	},
	{
		name: 'London',
		月份: 'Aug.',
		月均降雨量: 35.6
	},
	{
		name: 'Berlin',
		月份: 'Jan.',
		月均降雨量: 12.4
	},
	{
		name: 'Berlin',
		月份: 'Feb.',
		月均降雨量: 23.2
	},
	{
		name: 'Berlin',
		月份: 'Mar.',
		月均降雨量: 34.5
	},
	{
		name: 'Berlin',
		月份: 'Apr.',
		月均降雨量: 99.7
	},
	{
		name: 'Berlin',
		月份: 'May',
		月均降雨量: 52.6
	},
	{
		name: 'Berlin',
		月份: 'Jun.',
		月均降雨量: 35.5
	},
	{
		name: 'Berlin',
		月份: 'Jul.',
		月均降雨量: 37.4
	},
	{
		name: 'Berlin',
		月份: 'Aug.',
		月均降雨量: 42.4
	}
]

onMounted(() => {
	const stackedColumnPlot = new Column('ZhuZhuangTu03', {
		data,
		isGroup: true,
		xField: '月份',
		yField: '月均降雨量',
		seriesField: 'name',
		/** 设置颜色 */
		//color: ['#1ca9e6', '#f88c24'],
		/** 设置间距 */
		// marginRatio: 0.1,
		label: {
			// 可手动配置 label 数据标签位置
			position: 'middle', // 'top', 'middle', 'bottom'
			// 可配置附加的布局方法
			layout: [
				// 柱形图数据标签位置自动调整
				{type: 'interval-adjust-position'},
				// 数据标签防遮挡
				{type: 'interval-hide-overlap'},
				// 数据标签文颜色自动调整
				{type: 'adjust-color'}
			]
		}
	})

	stackedColumnPlot.render()
})
</script>
